<template>

    <view class="page">
         <view class="tab flex justify-center  bac-color-fff pad-b-10 pad-t-10">
            <view style=" border-radius:8px" class="over-hid">
                <navigator open-type="redirect" url="/pages/yuyue/timetable" class="tab-item font-size-20 border-r-f2  dis-inline-block"> 
                    预约中心
                </navigator>
                <view class="tab-item font-size-20 dis-inline-block active"> 
                    乡镇
                </view>
            </view>
        </view>
        <view class="container" v-if="room_list.length>0">
            <navigator :url="'/pages/room/detail?id='+item.id" class="flex align-center list-item mar-t-10 bac-color-fff" v-for="(item,index) in room_list" :key="index">
               <view class="" style="flex: 0 0 100px;"  v-if="item.images" >
					<image class="" style="width: 100%;" :src="item.images[0]"/>
               </view>
                <view class="mar-l-10">
                    <view class="font-color-333 font-bold font-size-15">{{item.name}}</view>
                    <view class="font-color-888 font-size-14 mar-t-3 tq-text-line2">地址：{{item.address}}</view>
					<view class="phone font-size-14 mar-t-3 font-color-999">电话：{{item.phone}}</view>
                </view>
            </navigator>
        </view>
        
    </view>
</template>

<script>
import {getRooms} from '@/utils/http'
export default {
    data() {
        return {
            index_page:0,
			total_page:1,
			room_list:[],//
        }
    },
    methods: {
        getRooms(){
            getRooms({type:'room',page:this.index_page + 1}).then(res=>{
                if(res){
                    this.index_page = res.current_page;
					this.total_page = res.last_page;
                    this.room_list = [...this.room_list,...res.data]
                }
            })
        }
    },
    onLoad() {
        this.getRooms();
    },
    //下拉刷新
	onPullDownRefresh(){
		this.index_page = 0;
		this.total_page = 1;
		this.room_list = []
		this.getRooms();
	},
	//上拉加载
	onReachBottom(){
		console.log('onReachBottom')
		if(this.index_page < this.total_page){
			this.getRooms();
		}
	},
}
</script>

<style scoped>
page{
    background: #F4F5FA;
}
.tab-item.active{
    background-color: #0088FF !important;
    color: #fff;
}
.tab-item{
    width: 120px;
    padding:8px 10px;
    text-align: center;
    color: #333;
    background-color: #f4f4f4;
}
.list-item{
    padding: 10px 10px;
    border-radius: 8px;
}
.list-item image{
    height: 90px;
    width: 120px;
    background-color: #ccc;
}

</style>